<template>
  <div class="home">
    <myHeader>
      <template v-slot:title>
        <div>手机号登录</div>
      </template>
    </myHeader>
    <div class="box">
      手机号:
      <input type="text" v-model="mobile" placeholder="请输入手机号" />
      <br />验证码:
      <input type="text" v-model="code" placeholder="请输入验证码" />
      <button @click="getcode">{{text}}</button>
      <br />
      <button :class="{login:true,color:disabled}" :disabled="disabled" @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/myHeader/myHeader.vue";
// 手机号正则
let regmobile = /^1[356789]\d{9}$/;
// 验证码正则
let regcode = /^\d{4,6}$/;
export default {
  name: "Home",
  created() {
    // console.log(this);
    // this.$loding.show({ msg: "请填写手机号" });
  },
  components: {
    myHeader,
  },
  data() {
    return {
      mobile: "",
      code: "",
      disabled: true,
      text: "获取验证码",
      issend: false,
    };
  },
  methods: {
    getcode() {
      if (!this.mobile) {
        this.loding({
          msg: "请输入手机号",
          src: "https://img1.baidu.com/it/u=3533565334,2392047481&fm=26&fmt=auto&gp=0.jpg",
        });
      } else if (!regmobile.test(this.mobile)) {
        this.loding({
          msg: "请输入正确的手机号",
          src: "https://img1.baidu.com/it/u=3533565334,2392047481&fm=26&fmt=auto&gp=0.jpg",
        });
      } else {
        this.loding({
          msg: "发送成功",
          src: "https://img1.baidu.com/it/u=3533565334,2392047481&fm=26&fmt=auto&gp=0.jpg",
        });
        this.issend = true;
        let num = 5;
        var timer = setInterval(() => {
          if (num >= 1) {
            num--;
            this.text = `倒计时${num}秒`;
          } else {
            clearInterval(timer);
            this.text = "获取验证码";
            this.issend = false;
          }
        }, 1000);
      }
    },
    loding(obj) {
      this.$loding.show(obj);
      setTimeout(() => {
        this.$loding.hide();
      }, 1000);
    },
    login() {
      if (!this.issend) {
        this.loding({
          msg: "请先发送验证码",
          src: "https://img1.baidu.com/it/u=3533565334,2392047481&fm=26&fmt=auto&gp=0.jpg",
        });
        return;
      }
      if (!regcode.test(this.code)) {
        this.loding({
          msg: "验证码不正确",
          src: "https://img1.baidu.com/it/u=3533565334,2392047481&fm=26&fmt=auto&gp=0.jpg",
        });
      } else {
        this.$router.push("/about");
      }
    },
  },
  watch: {
    mobile() {
      if (regmobile.test(this.mobile) && regcode.test(this.code)) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
    code() {
      if (regmobile.test(this.mobile) && this.code) {
        this.disabled = false;
      } else {
        this.disabled = true;
      }
    },
  },
};
</script>
<style lang="scss" scpoed>
.home {
  .box {
    width: 80%;
    margin: auto;
    margin-top: 40%;
    input {
      height: 25px;
    }
    button {
      height: 30px;
      margin-left: 10px;
    }
    .login {
      padding: 0 20px;
      display: block;
      margin: 15px auto;
      background: red;
      border: 0;
      border-radius: 10px;
      color: #fff;
    }
    .color {
      background: #ccc;
    }
  }
}
</style>
